<template>
	<view >
		<view class="">
			<u--image
				:showLoading="true" 
				:src="getImg('integralRecord-bg')"
				width="100%" 
				height="400rpx"
			></u--image>
		</view>
		<view class="padlr24 pad-t20 pad-b170">
			<view class="block-box product-info bor-r16 pad24">
				<view class="info-price flex-a ju-bt">
					<view class="price-txt">
						<text class="f-s48">499</text>
						<text class="f-s28">积分</text>
						<text class="mar-l14 info-999 txt-del">¥2980</text>
					</view>
					<view class="info-999">
						<text>已售188</text>
						<text class="mar-l24">库存812</text>
					</view>
				</view>
				<view class="info-tit mar-t14">
					瓷肌美白通透亮肤舒缓保湿美白淡斑组合套餐
				</view>
				<view class="txt-666 mar-t10">
					兑换限制：5次/人
				</view>
				<view class="txt-666 mar-t10">
					温馨提示：兑换服务后，可前往【我的权益】查看并使用
				</view>
			</view>
			<view class="store-list block-box bor-r16 pad24 mar-t20">
				<view class="block-tit flex-a ju-bt">
					<view class="">
						可兑换门店
					</view>
					<view class="block-more flex-a">
						<text class="txt-666 mar-r4">更多</text>
						<u--image
							:showLoading="true" 
							:src="getImg('arrow-right')"
							width="16rpx" 
							height="24rpx"
						></u--image>
					</view>
				</view>
				<view class="list-box">
					<u-radio-group
					    v-model="selectShop"
					    placement="column"
					>
						<view 
							class="list-li flex-a ju-bt mar-t24" 
							v-for="(item, index) in 5" 
							:key="index"
						>
							<u-radio
								:name="item"
								size="40rpx"
							>
							</u-radio>
							<view class="li-r pad20">
								<view class="blokc-tit flex-a ju-bt">
									<view class="tit-w f-s28 text-elpis">
										爱美丽美容院(乐清柳市店)市店)
									</view>
									<view class="flex-a ">
										<u--image
											:showLoading="true" 
											:src="getImg('location-icon')"
											width="40rpx" 
											height="40rpx"
										></u--image>
										<text class="txt-666">据您1.3km</text>
									</view>
								</view>
								<view class="mar-t10 txt-666 f-s24">
									千帆东路555号浙江省乐清市城南街道清远路307号民生公寓B幢303、304室481号沿街栋五楼
								</view>
							</view>
						</view>
					</u-radio-group>
				</view>
			</view>
		</view>
		<view class="fot-box flex-center">
			<view class="fot-btn w-560">
				立即兑换
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectShop: "",
			}
		},
		onLoad() {
			
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.fot-box {
		background: #F5F5F5;
		.fot-btn {
			height: 84rpx;
			background: #FF7171;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			border-radius: 12rpx;
		}
	}
	.store-list {
		.list-box {
			.list-li {
				.li-r {
					width: calc(100% - 60rpx);
					// height: 158rpx;
					background: #FFFFFF;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					border: 2rpx solid #CACACA;
					.tit-w {
						width: 65%;
					}
				}
			}
		}
	}
	.info-999 {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
	}
	.txt-666 {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #666666;
	}
	.product-info {
		.info-tit {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #111111;
		}
		.info-price {
			.price-txt {
				font-family: MiSans, MiSans;
				font-weight: 500;
				color: #FF7171;
			}
		}
	}
</style>
<style>
	page {
		background: #F5F5F5;
	}
</style>
